<!--
 * @Author: Gabriel 1599130621@qq.com
 * @Date: 2022-10-11 15:53:06
 * @LastEditors: 九璃怀特 1599130621@qq.com
 * @LastEditTime: 2022-10-26 16:29:43
 * @FilePath: \nonogram\src\pages\Header.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import NonogramView from "@/components/nonogram/nonogramView.vue";
const titleKfc = [
  [
    1, 0, 0, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0,
    1, 0, 0, 1, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1,
  ],
  [
    1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0,
    1, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 1,
  ],
  [
    1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0,
    1, 1, 0, 0, 0, 1, 1, 1, 0, 1, 0, 0, 0, 0, 1,
  ],
  [
    0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0,
    1, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0,
  ],
  [
    0, 0, 1, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0,
    1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1,
  ],
];
const titleNono = [
  [
    1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0,
    1, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 1,
  ],
  [
    1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0,
    1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1,
  ],
  [
    1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 0,
    1, 1, 0, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1,
  ],
  [
    1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0,
    1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0,
  ],
  [
    1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0,
    1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1,
  ],
];
const TitleArr = computed(() => {
  return Math.random() > 0.5 ? titleKfc : titleNono;
});
const G = [
  [0, 1, 1, 0, 0],
  [1, 0, 0, 0, 0],
  [1, 0, 1, 1, 0],
  [1, 0, 0, 1, 0],
  [0, 1, 1, 0, 0],
];
const IsPhone = /mobile/i.test(navigator.userAgent);
onMounted(() => {});
</script>

<template>
  <div class="menu">
    <NonogramView
      v-if="!IsPhone"
      :titleNoNo="TitleArr"
      :view="125"
    ></NonogramView>
    <h1 v-else="IsPhone">数织</h1>
  </div>
</template>

<style scoped lang="less">
.menu {
  // background-color: rgb(234, 230, 205);
  display: flex;
  height: 125px;
  min-height: 125px;
  min-width: 125px;
  align-items: center;
  justify-content: center;
  align-content: center;
  position: relative;
  h1 {
    font-size: 60px;
    text-shadow: 5px 3px rgb(255, 255, 255);
  }
}
</style>
